<template>
    <div class="pagination-wrapper">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
            :page-sizes="pageSizes" :layout="layout" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
    /** 当前页码 */
    page: number
    /** 每页条数 */
    size: number
    /** 总条数 */
    total: number
    /** 可选的每页条数 */
    pageSizes?: number[]
    /** 分页器布局 */
    layout?: string
}

// 默认配置
const props = withDefaults(defineProps<Props>(), {
    pageSizes: () => [10, 20, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper'
})

// 默认配置 定义事件
const emit = defineEmits(['update:page', 'update:size', 'pagination'])

// 当前页, 获取当前页码
const currentPage = computed({
    get: () => props.page,
    set: (val) => emit('update:page', val)
})

// 每页条数, 获取每页条数
const pageSize = computed({
    get: () => props.size,
    set: (val) => emit('update:size', val)
})

// 页码改变, 页码改变时触发 返回当前页码和每页条数
const handleCurrentChange = (val: number) => {
    emit('pagination', { page: val, size: pageSize.value })
}

// 每页条数改变, 每页条数改变时触发 返回当前页码和每页条数
const handleSizeChange = (val: number) => {
    emit('pagination', { page: 1, size: val })
}
</script>

<style scoped>
.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>